var vm = new Vue({
    el: "#app",
    data: {
      a: 1
    }
  })
// Vue 不能检测对象属性的添加或删除
// 对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。
// 可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。
vm.b = 2

var vm2 = new Vue({
    el: "#app2",
    data: {
      userProfile: {
        name: 'Anika'
      }
    }
  })

// computed
var vm3 = new Vue({
  el: "#app3",
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  computed: {
    evenNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  }
})

// methods
var vm4 = new Vue({
  el: "#app4",
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  methods: {
    even: function (numbers) {
      return numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  }
})

new Vue({
  el: "#app5"
})

new Vue({
  el: "#app6",
  data: {
    items: [
      {msg: 11}, 
      {msg: 12},
      {msg: 13},
      {msg: 14},
      {msg: 15},
      {msg: 16},
    ]
  }
})